let playerState = 'run';
const dropDown = document.getElementById("animations");
dropDown.addEventListener('change',function (e) {
    playerState = e.target.value;
})

const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext("2d");
const CANVAS_WIDTH = canvas.width = 600;
const CANVAS_HEIGHT = canvas.height = 600;

const playerImage = new Image();
playerImage.src = "shadow_dog.png";
//let x = 0;
const spriteWidth = 575;
const spriteHeight = 523;
// let frameX = 0;
// let franmeY = 4;
//let playerState = 'run';
let gameFrame = 0;
const staggerFrames = 15;
const spriteAnimations = [];
const animationStates = [
    {
        name:'idle',
        frames:7
    },
    {
        name:'jump',
        frames:7
    },
    {
        name:'fall',
        frames:7
    },
    {
        name:'run',
        frames:9
    },
    {
        name:'dizzy',
        frames:11
    },
    {
        name:'site',
        frames:5
    },
    {
        name:'roll',
        frames:7
    },
    {
        name:'bite',
        frames:7
    },
    {
        name:'ko',
        frames:12
    },
    {
        name:'getHit',
        frames:4
    }
];
animationStates.forEach((state,index) => {
    let frames = {
        loc:[],
    };
    for(let j = 0; j < state.frames; j++){
        let positionX = j * spriteWidth;
        let positionY = index * spriteHeight;
        frames.loc.push({x:positionX,y:positionY});
    }
    spriteAnimations[state.name] = frames;
});

function animate() {
    ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
    let position = Math.floor(gameFrame/staggerFrames) % spriteAnimations[playerState].loc.length;
    let frameX = spriteWidth * position;
    let frameY = spriteAnimations[playerState].loc[position].y;

    //ctx.fillRect(100,50,100,100);
    //x++;
    //ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
    //画一整张图
    //ctx.drawImage(playerImage,0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
    //画一整张图的部分
    ctx.drawImage(playerImage,frameX,frameY,spriteWidth,spriteHeight,0,0,spriteWidth,spriteHeight);
    // if(gameFrame % staggerFrames === 0){
    //     if(frameX < 6) frameX ++;
    //     else frameX = 0;
    // }
    gameFrame ++;
    requestAnimationFrame(animate);
    //setTimeout(animate,100);
};
animate();

